<template>
  <div class="app-container">
    <el-row :gutter="20" class="home-top">
      <el-col :span="12">
        <div class="grid-content">昨日加粉
          <el-tooltip class="item" effect="dark" v-bind:content="addFansCount" placement="right">
            <img src="../../../static/images/i-tips.png">
          </el-tooltip>
        </div>
        <div class="fans-count">{{addFansCount}}</div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">总加粉量
          <el-tooltip class="item" effect="dark" v-bind:content="allFansCount" placement="right">
            <img src="../../../static/images/i-tips.png">
          </el-tooltip>
        </div>
        <div class="fans-count">{{allFansCount}}</div>
      </el-col>
    </el-row>
    <el-row class="content">
      <img src="../../../static/images/i-home.png">
      <div class="desc">当前无进行中的订单，快<router-link class="link-type" :to="'/order/order'"><span class="blue">去下单</span></router-link>吧</div>
    </el-row>
  </div>
</template>

<script>
import ajax from '@/utils/ajax'
export default {
  name: 'home',
  data() {
    return {
      addFansCount: '',
      allFansCount: ''
    }
  },
  created() {
    if (sessionStorage.getItem('isBinding') === false) {
      this.$router.push({ path: '/authorize' })
    }
    this.getData()
  },
  methods: {
    getData() {
      const self = this
      ajax.getData(process.env.BASE_API + '/users').then(function(res) {
        self.addFansCount = res.data.addFansCount
        self.allFansCount = res.data.allFansCount
      })
    }
  }
}
</script>

<style scoped>
  .home-top{
    height: 105px;
    padding: 10px 0;
    margin: 0!important;
    background-color: #f0f9f7;
    width:100%;
  }
  .grid-content {
    height: 100%;
    line-height: 50px;
    text-align: center;
    color:#666666;

  }
  .fans-count{
    text-align: center;
    color:#07bd99;
    font-size: 14px;
  }

  .content{
    margin-top: 50px;
    text-align: center;
    height: 300px;
  }
  .desc{
    margin-top: 20px;
  }
  .blue{
    color: #0586e1;
  }
</style>
